<template>
  <div class="dws">
    <div>
      <span>居民姓名：</span>
      <el-input
        placeholder="请输入居民姓名"
        size="small"
        style="width: 25%"
      ></el-input>
      <span style="display: inline-block; margin-left: 15px">证件号码：</span>
      <el-input
        placeholder="请输入证件号码"
        size="small"
        style="width: 25%"
      ></el-input>
      <span style="display: inline-block; margin-left: 15px">随访医生：</span>
      <el-select
        filterable
        placeholder="请选择随访医生"
        size="small"
        style="width: 25%"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div style="margin-top: 15px">
        <span style="display: inline-block">完善情况：</span>
        <el-select
          filterable
          placeholder="请选择完善情况"
          size="small"
          style="width: 25%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-refresh-right"
          style="
            background-color: #fff;
            color: rgb(47, 160, 254);
            float: right;
            margin-right: 9%;
          "
          >重置</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          style="margin-left: 15px; float: right; margin-right: 15px"
          >查询</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 15px"
      :header-cell-style="{
        color: '#000',
        backgroundColor: 'rgb(222,234,255)',
      }"
      height="605"
    >
      <el-table-column prop="date" label="姓名" width="120" align="center" fixed="left">
        <template slot-scope="scope">
          <a style="color: rgb(24, 144, 255)">{{ scope.row.name }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="idcarde" label="证件号码" width="200">
      </el-table-column>
      <el-table-column prop="ys1" label="待完善随访项目" width="200">
      </el-table-column>
      <el-table-column prop="ys1" label="来源" width="200">
      </el-table-column>
      <el-table-column prop="jdDate" label="创建时间" width="200">
      </el-table-column>
      <el-table-column prop="jdDate" label="随访时间" width="200"></el-table-column>
      <el-table-column prop="ys" label="随访医生" width="200"></el-table-column>
      <el-table-column prop="ys1" label="随访单位" width="200"></el-table-column>
      <el-table-column prop="ys1" label="填写进度" width="200"></el-table-column>
      <el-table-column prop="jdDate" label="最近更新时间" width="200"></el-table-column>
      <el-table-column prop="date" label="操作" fixed="right" width="150">
        <template slot-scope="">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="dialogVisible = true"
            style="background-color: #fff; color: rgb(47, 160, 254)"
            >进入随访</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
    </div>
    <!-- 弹层开始 -->
    <el-dialog
      title="老年人中医药健康服务"
      :visible.sync="dialogVisible"
      width="97%"
      :before-close="handleClose"
      :append-to-body="true"
      style="margin-top: -10vh;"
      :close-on-click-modal="false"
    >
      <div style="height: 65vh; overflow: auto">
        <lnrzyyjkfw></lnrzyyjkfw>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!-- 弹层结束 -->
  </div>
</template>
        
        <script>
import lnrzyyjkfw from "@/views/tab_info/lnrzyyjkfw.vue";

export default {
  components: {
    lnrzyyjkfw,
  },
  data() {
    return {
      tableData: [
        {
          name: "王洛勇",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "张云龙",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "李文文",
          six: "女",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "张雨生",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
      ],
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      dialogVisible: false,
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
        
        <style>
.dws {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}
</style>